


* {
    font-size: var(--font-size-small);
}
@media (min-width: 35rem) {
    * {
        font-size: var(--font-size-medium);
    }
}



body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    gap: 1rem;
}


#app {
    margin: 0;
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
}


.sidebar {
    width: 2em;
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-primary);
    font-size: var(--font-size-medium);
    align-self: flex-start;
    border-collapse: collapse;
    min-width: calc(var(--font-size-large) + 0.5em);
}
@media (min-width: 40rem) {
    .sidebar {
        font-size: var(--font-size-large);
    }
}


.sidebar ul,
.sidebar-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.sidebar ul li,
.sidebar-list-item {
    width: 100%;
    padding: 10%;
    border: 2px solid var(--color-primary);
}

.sidebar ul li:hover,
.sidebar-list-item:hover {
    cursor: pointer;
    color: white;
    background-color: var(--color-text-lighting);
    text-shadow: 0px 0px 1px var(--color-theme);
}


/* 给 panel 加些属性 */
.panel {
    align-self: flex-start;

    width: 100%;
    height: 100%;
    /* min-width: var(--global-content-min-width - 10%); */
    /* min-height: 25rem; */
    max-width: 35rem;
    max-height: 60rem;

    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: center;
}
@media (min-width: 80rem) {
    .panel {
        width: 50%;
    }
}
.panel * {
    width: 100%;
}



.panel h1,
.panel-title {
    font-size: var(--font-size-medium);
    box-sizing: border-box;
    padding: 0.25em;
    text-align: left;
    border-bottom: 2px solid var(--color-primary);
}
@media (min-width: 24rem) {
    .panel h1,
    .panel-title {
        font-size: var(--font-size-large);
    }
}
@media (min-width: 30rem) {
    .panel h1,
    .panel-title {
        font-size: var(--font-size-x-large);
    }
}







.panel-article-manage {
    position: relative;
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-rows: 9fr 1fr;
    grid-template-columns: 2fr 1.5fr;
    grid-template-areas:
        "list list"
        "nothing title";
}
.panel-article-manage h1,
.panel-article-manage .panel-title {
    grid-area: title;
    text-align: center;
}


.panel-sort-manage {
    position: relative;
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-rows: 1fr 9fr;
    grid-template-columns: 1fr;
}


/* 发布文章面板 */
.panel-article-publish {
    position: relative;
    width: 100%;
    height: 100%;

    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-rows: 10% 10% 10% 8% 52% 10%;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "head head"
        "title title"
        "date date"
        "reprint reprint"
        "editor editor"
        "sort publish";
}
.panel-article-publish h1,
.panel-article-publish .panel-title {
    grid-area: head;
}




/* 文章显示列表 */
.panel-list {
    grid-area: list;
    list-style: none;
    display: flex;
    flex-direction: column;
}
.panel-list-item {
    user-select: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px black;
}

.panel-list-item-title {
    text-align: left;
}
.panel-list-item-title:hover {
    cursor: pointer;
    color: var(--color-text-lighting);
    text-decoration: none;
}



/* 标题输入区域 */
.panel-input-title {
    grid-area: title;
    width: 80%;
    height: 80%;
    margin: auto;
    display: grid;
    gap: 1px;
    align-items: center;
    justify-content: center;
    text-align: left;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
}
@media (min-width: 45rem) {
    .panel-input-title {
        text-align: center;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}


/* 标题输入框 文本居中 */
.panel-input-title input {
    text-align: center;
}


/* 日期输入区域 */
.panel-input-date {
    grid-area: date;
    width: 80%;
    display: flex;
    align-items: center;
    gap: 0.5em;

    text-align: left;
    margin: auto;
}
.panel-input-date label {
    width: auto;
    user-select: none;
    min-width: 2em;
}


/* 转载 */
.panel-input-reprint {
    grid-area: reprint;
    width: 80%;
    display: flex;
    align-items: center;
    gap: 0.5em;
    overflow: hidden;

    text-align: left;
    margin: auto;

    flex-wrap: wrap;
}
.panel-input-reprint * {
    width: auto;
    user-select: none;
}
.panel-input-reprint label {
    min-width: 3em;
}
.panel-input-reprint input[type=text] {
    max-width: 4em;
    width: 100%;
}
.panel-input-reprint > div {
    width: 100%;
    overflow: hidden;
}
.panel-input-reprint input[type=url] {
    width: 100%;
}
@media (min-width: 25rem) {
    .panel-input-reprint {
        flex-wrap: nowrap;
    }
}



/* 文章分类输入区域 */
.panel-input-sort {
    grid-area: sort;
    width: 90%;
    margin: auto;
    display: grid;
    gap: 1px;
    align-items: center;
    justify-content: center;
    text-align: left;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
}
@media (min-width: 25rem) {
    .panel-input-sort {
        gap: 0px;
    }
}

@media (min-width: 55rem) {
    .panel-input-sort {
        transform: translateY(30%);
        gap: 0.5em;
        text-align: right;
        grid-template-columns: 5fr 7fr;
    }
}


/* 发布按钮区域 */
.panel-input-publish {
    grid-area: publish;
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.panel-input-publish button,
.panel-input-publish .panel-input-publish-button {
    font-size: var(--font-size-small);
    width: 50%;
    height: 60%;
}
@media (min-width: 24rem) {
    .panel-input-publish button,
    .panel-input-publish .panel-input-publish-button {
        font-size: var(--font-size-medium);
    }
}

/* 标题输入区域 与 文章分类输入区域 input 共用样式 */
.panel-input-title input,
.panel-input-sort input {
    height: 80%;
    transform: translateY(-20%);
    font-size: var(--font-size-small);
}
@media (min-width: 24rem) {
    .panel-input-title input,
    .panel-input-sort input {
        transform: translateY(0%);
        font-size: var(--font-size-medium);
        /* height: calc(var(--font-size-medium) + 3px); */
    }
}
@media (min-width: 55rem) {
    .panel-input-title input,
    .panel-input-sort input {
        transform: translateY(0%);
        grid-template-columns: 3fr 7fr;
    }
}



/* 文章内容编写区域 */
.editor,
.cyue-editor {
    position: relative;
    width: 80%;
    height: 95%;
    margin: auto;

    max-height: 38rem;
}
@media (min-width: 30rem) {
    .editor,
    .cyue-editor {
        height: 100%;
    }
}

.pagination {
    width: 100px;
}


